<template>
  <div :style="{ width: '100%' }">
    <!-- 使用 v-bind和v-on来传递属性和方法-->
    <el-table v-bind="$attrs" v-on="$listeners">
      <el-table-column
        v-if="hasSelect"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
      >
        <template v-if="item.render" v-slot="scope">
          <render-dom :render="() => item.render(scope.row)"></render-dom>
        </template>
      </el-table-column>
    </el-table>
    <!-- 

        v-bind="$attrs" ↓
     -->
    <el-pagination
      v-if="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.rows"
      layout="total, sizes, prev, pager, next"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ele-table",
  components: {
    // 函数式组件注册
    renderDom: {
      functional: true,
      props: {
        render: Function,
      },
      render(createElement, renDom) {
        return <div>{renDom.props.render()}</div>;
      },
    },
  },
  props: {
    //勾选框
    hasSelect: Boolean,
    //表格
    columns: {
      type: Array,
      default: () => [],
    },
    pagination: Object, //分页
    height: String, //表格高度
  },
  data() {
    return {};
  },
  methods: {
    // pageSize 改变时会触发
    handleSizeChange(args) {
      this.$emit("size-change", args);
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.$emit("page-change", val);
    },
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  text-align: right;
}
</style>